<template>
  <div class="demo-list-w">
    <skill-title :item="item"></skill-title>
    <div class="items">
      <div class="item" v-for="(item, index) in demos" :key="index">
        <div class="title" v-if="item.title">{{ item.title }}</div>
        <div class="more" v-else>等等..</div>
        <div class="desc" v-if="item.desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import SkillTitle from '@/components/cmp/SkillTitle'

export default {
  name: 'DemoList',
  components: {SkillTitle},
  props: ['item'],
  computed: {
    demos() {
      const ds = this.item.demos || []
      return [...ds.reduce((total, cur = '') => {
        console.log(cur)
        const tmp = {}
        if (cur.indexOf(' : ') > -1) {
          const arr = cur.split(' : ')
          tmp.title = arr[0]
          tmp.desc = arr[1]
        } else {
          tmp.title = cur
        }
        total.push(tmp)
        return total
      }, []), {}]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/common.scss";

.demo-list-w {

  .items {
    padding: 0 13px;
    display: flex;
    flex-direction: row;

    .item {
      &:first-child {
        border-left: none;
      }

      border-left: 2px solid $c1;
      //box-shadow: $d3;
      flex-grow: 1;
      margin-top: 3px;
      padding: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .title {
        width: 100px;
        font-size: 8px;
        color: $c1;
        text-align: center;
        padding-bottom: 2px;
      }

      .more {
        font-size: 10px;
        width: 50px;
        color: $c1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .desc {
        font-size: 8px;
        color: black;
      }
    }
  }

}

</style>
